/* Next 2 needed for sticky footer - from https://getbootstrap.com/docs/5.0/examples/sticky-footer/ example */
html, body, form {
    height: 100% !important;
    flex-direction: column !important;
    display: flex !important;
}

    main {
        background-image: url('images/background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }

.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-brand {
    padding-top: 0px;
}


@media only screen and (max-width: 991px) {
    .navbar, .language-object {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media only screen and (min-width: 1401px) {
    .ps-5 {
        padding-left: 3rem !important;
    }

    .pe-5 {
        padding-right: 3rem !important;
    }
}

/*atos decorative banners*/
.atos-header-decor-r, .atos-header-decor {
    padding: 0px !important;
}


@media only screen and (max-width: 991px) {
    .atos-header-decor-r, .atos-header-decor {
        display: none;
    }
    .navbar-brand {
        margin: unset !important;
    }
}

@media only screen and (min-width: 992px) {
    .navbar-brand {
        margin: 0 auto !important;
    }

    .atos-header-decor-r img {
        float: right;
    }
}

/*header img resizing*/
@media only screen and (min-width: 992px) and (max-width: 1367px) {
    .navbar-brand img {
        width: 270px;
    }
    .atos-header-decor img, .atos-header-decor-r img {
        width: auto !important;
        height: 160px !important;
    }
}

@media only screen and (min-width: 1368px) and (max-width: 1549px) {
    .navbar-brand img {
        width: 350px;
    }
    .atos-header-decor img, .atos-header-decor-r img {
        width: auto !important;
        height: 200px !important;
    }
}

@media only screen and (min-width: 1550px) {
    .atos-header-decor img, .atos-header-decor-r img {
        width: auto !important;
        height: 240px !important;
    }
}


div.container-fluid.row.ps-0.pe-0 {
    align-items: center !important;
}


    /*login panel*/
    form {
        flex-direction: column !important;
        display: flex !important;
        margin-block-end: 0;
    }

.Normal p, .Normal a, .LoginPanel p, .LoginPanel a, .LoginPanel #text, body, p, a {
    color: var(--atos-white);
}

.Normal p {
    padding-top: 20px;
}

.Normal a:hover, .LoginPanel a:hover {
    text-decoration: none !important;
    color: var(--atos-white) !important;
}

a:hover {
    color: var(--atos-white) !important;
    text-decoration: none !important;
}

    .login-logo {
        margin-bottom: 90px;
    }

    @media only screen and (max-width: 767px) {
        .login-logo {
            padding-bottom: 41px;
            margin-bottom: 40px;
        }
    }

    @media only screen and (min-width: 992px) {
        h1 {
            color: var(--atos-white) !important;
            font-family: 'Raleway Extra Bold' !important;
            font-size: var(--atos-h1-login-size) !important;
            line-height: 68px !important;
            margin-bottom: 58px;
            margin-top: 84px;
        }
    }

    @media only screen and (max-width: 991px) {
        h1 {
            color: var(--atos-white) !important;
            font-family: 'Raleway Extra Bold' !important;
            font-size: var(--atos-h1-mobile-login-size);
            line-height: 36px;
            margin-bottom: 38px;
        }
    }

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .col-lg-6 {
        width: 66% !important;
    }
}


@media only screen and (min-width: 576px) and (max-width: 636px) {
    .LoginPanel button label {
        white-space: nowrap !important;
    }
}

@media only screen and (max-width: 575px) {
    .LoginPanel .forgotPasswordLink {
        float: left !important;
        text-align: left !important;
        margin-top: 20px !important;
    }
}
    .col-form-label, .form-check-label, label {
        color: var(--atos-white) !important;
        margin-top: 4px !important;
    }

.form-check {
    display: flex;
}

    .form-check .form-check-input {
        padding: 10px;
    }

    .form-control, .form-control:focus, .LoginPanel input[type="password"] {
        background: var(--atos-form-fields);
        color: var(--atos-blue);
        font-weight: 400;
        border: none;
        box-shadow: none;
        outline: none;
        margin-bottom: 0px;
        border-radius: unset;
    }

.RSVPPanel button {
    margin-top: 25px !important;
}

.button, .btn, .btn-primary, button:not(:disabled) {
    background-color: var(--atos-white);
    color: var(--atos-blue) !important;
    font-size: 20px;
    font-family: 'Raleway Bold';
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    padding: 12px 52px;
}

        button:hover, .btn:hover {
            background-color: var(--atos-light-blue);
            color: var(--atos-white);
        }

    .row.justify-content-end.mb-3 {
        padding-top: 18px;
    }


    .LoginPanel .mb-3 {
        padding-bottom: 20px;
    }


    /*login panel main logo*/
    @media only screen and (max-width: 599px) {
        .mt-5 {
            margin-top: 1.5rem !important;
        }
    }

    @media only screen and (min-width: 600px) and (max-width: 767px) {
        .mt-5 {
            margin-top: 0.5rem !important;
        }
    }

    @media only screen and (min-width: 860px) and (max-width: 991px) {
        .mt-5 {
            margin-top: 1.2rem !important;
        }
    }

@media only screen and (min-width: 576px) and (max-width: 630px) {
    .LoginPanel .forgotPasswordLink {
        width: 80% !important;
    }
}

@media only screen and (min-width: 1043px) and (max-width: 1099px) {
    .LoginPanel .forgotPasswordLink {
        width: 80% !important;
    }
}

@media only screen and (min-width: 1358px) and (max-width: 1439px) {
    .LoginPanel .forgotPasswordLink {
        width: 80% !important;
    }
}


/*bottom logo*/
.bottom-0 {
    bottom: 70 !important;
}

    /*forgotten password link*/
    .LoginPanel .forgotPasswordLink {
        color: var(--atos-white);
        float: right;
        text-align: right;
        text-decoration: underline !important;
    }

        .LoginPanel .forgotPasswordLink:hover {
            text-decoration: none !important;
            color: var(--atos-white) !important;
        }

    /*form validation*/
.LoginPanel .invalid-feedback, .ResetPasswordPanel .invalid-feedback, .RSVPPanel .invalid-feedback {
    width: 100% !important;
}

.invalid-feedback {
    background-color: var(--atos-white);
    color: var(--atos-red);
    border-radius: unset;
    padding: 9px 19px;
    margin-top: 20px;
    margin-bottom: 0px;
    font-size: var(--atos-validation-size);
    font-family: 'Raleway Bold';
}

    .RSVPPanel .invalid-feedback {
        margin-bottom: 20px;
    }

    /*reset password*/
    .ResetPasswordPanel .mb-3 {
        padding-bottom: 20px;
    }

.language-object {
    width: 100% !important;
    text-align: center !important;
    display: flex;
}

    .language-object .Language {
        padding-left: 15px;
        padding-right: 15px;
    }

@media only screen and (min-width: 992px) {
    .language-object {
        justify-content: center;
    }
}

    /* Mobile overrides */
 @media only screen and (max-width: 991px) {
        .language-object {
            justify-content: right;
        }
    }


@media only screen and (max-width: 767px) {
    .dl-login-bl {
            display: none !important;
        }
    }

    /*@media only screen and (max-width: 575px) {
        .LoginPanel .forgotPasswordLink {
            transform: translate(0%, -200%);
        }
    }*/

    /*Sing-up Page DNN module specific*/
    div.dnnRegistrationForm {
        width: 100%;
        min-width: inherit;
    }

        div.dnnRegistrationForm .dnnForm {
            min-width: 0;
            width: 100%;
        }

    .dnnRegistrationForm .dnnActions {
        clear: both;
    }

    .dnnRegistrationForm ul {
        display: flex;
        list-style: none;
        padding-left: 0;
        justify-content: flex-end;
    }

    .dnnRegistrationForm li a {
        border-radius: unset;
        border: none;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 25px;
        letter-spacing: 1px;
        background-color: var(--atos-blue);
    }

    .dnnRegistrationForm li {
        width: 33%;
    }


    .dnnRegistrationForm input {
        border: unset !important;
        background-color: var(--atos-form-fields);
        color: var(--atos-blue);
        width: 66%;
        padding: 6px 36px 6px 12px !important;
        margin-bottom: 30px;
    }

    .dnnRegistrationForm li a {
        background-color: var(--atos-blue);
        color: var(--atos-white);
        text-decoration: none !important;
    }

        .dnnRegistrationForm li a:hover {
            background-color: var(--atos-light-blue);
            color: var(--atos-light-blue);
            text-decoration: none;
        }

    .dnnRegistrationForm .dnnCheckbox {
        border: unset;
        display: inline-flex;
    }

    .dnnRegistrationForm .dnnCheckbox {
        display: none !important;
    }

    .dnnRegistrationForm input[type=checkbox] {
        position: unset !important;
        width: auto !important;
        opacity: unset !important;
        z-index: unset !important;
    }

    .dnnRegistrationForm .dnnTooltip {
        display: none;
    }

    .dnnRegistrationForm .dnnFormItem .dnnFormShort {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .dnnRegistrationForm .dnnLabel {
        margin-bottom: 30px;
        width: 33%;
    }

        .dnnRegistrationForm .dnnLabel label {
            color: var(--atos-blue) !important;
        }

    .dnnRegistrationForm .dnnFormError {
        color: var(--atos-red);
        font-size: var(--atos-validation-size);
        font-weight: 700;
        border-radius: unset;
        transform: translate(0px, -20px);
        float: left;
        margin-left: 33%;
        width: 66%;
    }

    .dnnRegistrationForm input[type=checkbox] .dnnFormError {
        margin-top: 30px;
    }


    @media only screen and (max-width: 767px) {
        .dnnRegistrationForm input, .dnnRegistrationForm .dnnLabel {
            width: 100%;
        }

        .dnnRegistrationForm input {
            margin-top: calc(.375rem + 1px);
        }

        .dnnRegistrationForm .dnnLabel {
            margin-bottom: 0px;
        }

        .dnnRegistrationForm ul {
            display: inline-block;
            width: unset !important;
            float: left;
        }

        .dnnRegistrationForm li:nth-last-child(2) {
            margin-bottom: 30px !important;
            margin-right: 0px;
        }

        .dnnRegistrationForm .dnnFormError {
            margin-left: unset;
            width: 100% !important;
        }


        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            .dnnRegistrationForm .dnnActions {
                display: inline-block;
            }

            .dnnRegistrationForm li {
                margin-bottom: 30px;
            }
        }
    }

    /*cookie notice*/
    .cookiealert a {
        color: var(--atos-white) !important;
    }

        .cookiealert a:hover {
            color: var(--atos-light-blue) !important;
        }

    .cookiealert {
        background: var(--atos-blue) !important;
        word-break: break-word !important;
    }

        .cookiealert .acceptcookies {
            padding: 9px 19px;
            margin: 0px !important;
        }

    .btn-sm.acceptcookies {
        border: 1px solid transparent;
        margin-left: 20px !important;
    }